<template>
    <div class="page">
        <div class="header">
            <van-image width="120" height="120" fit="contain" :src="getImageUrl('/images/login/bg.png')" />
            <NavBar :isArrow="true" :border="true" :fixed="true"/>
            <div class="font-24 font-w-500  m-l-40 m-r-40">欢迎,请登录</div>
        </div>
        <div class="content m-t-60 m-r-20 m-l-20">
            <van-form @submit="login">
               
                <van-field v-model="tel" type="tel" 
                placeholder="请输入手机号"
                maxlength="11" 
                class="font-16 font-w-500  m-b-10"
                :rules="[{ required: true, message: '请填写手机号' }]"
                />
                <van-field v-model="password" :type="passwordType.type" 
                placeholder="请输入密码"
                class="font-16 font-w-500 m-t-10 m-b-20"
                :rules="[{ required: true, message: '请填写密码' }]"
                >
                    <template #right-icon>
                        <van-image width="20" height="20" fit="contain" 
                            :src="getImageUrl(passwordType.icon)" 
                            @click="showPassword"
                        />
                    </template>
                </van-field>
                <div class="m-l-30 m-r-30 text-right">
                    <div class="font-12 font-color-666">忘记密码</div>
                </div>
                <div class="m-l-40 m-r-40">
                    <van-button round block type="primary" 
                        class="font-16 m-t-30 font-space-8 text-center" 
                        color="linear-gradient(270deg, #5756B3 0%, rgba(152, 70, 255, 0.99) 100%)"
                        native-type="submit"
                    >登录
                    </van-button>
                </div>
            </van-form>
        </div>
        
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import { useRouter,useRoute } from 'vue-router';
    import store from '../../store';
    //name 为图片的名称 包含 图片后缀
    const getImageUrl = (name:string) => {
        return new URL(`../../assets/${name}`, import.meta.url).href;
    }
    const tel = ref('');
    const password =ref('')
    const isPassword =ref(true)
    const passwordType =ref(
        {
            type:'password',
            icon:'/images/login/xsmm.png'
        })
    const showPassword = () => {
        isPassword.value = !isPassword.value
        passwordType.value.type = isPassword.value ? 'password' : 'text'
        passwordType.value.icon = isPassword.value ? '/images/login/xsmm.png' : '/images/login/noxsmm.png'
        console.log(isPassword.value,passwordType.value); 
    }
    const route = useRoute();
    const router = useRouter();
    const login = () => {
        store.commit('setUserInfo',{
            token:'123',
        })
        setTimeout(() => {
            router.push({
                path: route.query.redirect || '/'
            })
        }, 1000);
        console.log(tel.value,password.value,route.query);
    }
</script>
<style lang="scss" scoped>
</style>